import React, {
  Component,
  Fragment
} from 'react';

import './style-css.css';

import {
  CSSTransition,
  TransitionGroup
} from 'react-transition-group';

class AppGroup extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
    this.handleAddItem = this.handleAddItem.bind(this);
  }

  render() {
    return (
      <Fragment>
        <TransitionGroup>
          {
            this.state.list.map((item, index) => {
              return(
                <CSSTransition
                  timeout = {1000}
                  classNames="my-node"
                  unmountOnExit
                  onEntered = {(el) => {el.style.color = 'blue'}}
                  appear = {true}
                  key={index}
                >
                  <div>{item}</div>
                </CSSTransition>
              );
            })
          }
        </TransitionGroup>  
        <button onClick = {this.handleAddItem}>toogle</button>
      </Fragment>
    );
  }

  handleAddItem() {
    this.setState(() => {
      return ({
        list: [...this.state.list, "item"]
      });
    });
  }

}

export default AppGroup;